<template>
    <div class="news">
        <ul>
            <li v-for="item in newsList" :key="item.id">
                <!-- 第一种写法 -->
                <!-- <RouterLink :to="`/news/newsconten/${item.id}/${item.title}/${item.content}`">{{item.title}}</RouterLink> -->

                <!-- 第二种写法 -->
                <RouterLink :to="{
                    name: 'xwlb',
                    params: {
                        id: item.id,
                        title: item.title,
                        content: item.content,//在path中添加？让content变为可传可不传
                    }
                }">
                    {{ item.title }}
                </RouterLink>
            </li>
        </ul>
        <div class="newsconten">
            <RouterView></RouterView>
        </div>
    </div>


</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { RouterView, RouterLink } from 'vue-router';

const newsList = reactive([
    { id: 'xw1', title: '新闻报道01', content: '报道1' },
    { id: 'xw2', title: '新闻报道02', content: '报道2' },
    { id: 'xw3', title: '新闻报道03', content: '报道3' },
    { id: 'xw4', title: '新闻报道04', content: '报道4' },
])
</script>

<style scoped>
.news {
    display: flex;
    height: 100%;

    li {
        list-style: none;
        margin: 20px;

        a {
            color: black;
            text-decoration: none;
        }

    }

    .newsconten {
        width: 60%;
        border: 1px solid #333;
        margin: 16px;
        box-sizing: border-box;
        border-radius: 10px;
    }
}
</style>